<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>社团文件生成</title>
		<script src="./jQuery1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./vue_2.2.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="defult_model.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="table_css.css" />
	</head>
	<body style="background-image: url(./yellowPageBackgroundpng.png);">
		<div style="text-align: center;">
			<hr />
			<h2>算法与软件研究社团</h2>
			<h1>社&nbsp;团&nbsp;活&nbsp;动&nbsp;文&nbsp;件&nbsp;生&nbsp;成<s>&nbsp;系&nbsp;统&nbsp;</s><small>器</small></h1>
			（json部分）<br>
			Version 1.0
			<hr />

			<div style="text-align: center;">
				<div id="" style="width: 80%; margin: 0 auto;">
					<table class="pure-table" width="100%">
						<thead>
							<tr>
								<th style="width: 50%;">模板信息</th>
								<th style="width: 50%;">缓存信息</th>
							</tr>
						</thead>
						<tbody style="background-color: white;">
							<tr>
								<td>
									<p>粘贴由程序生成的模板json字符串</p>
									<textarea id="jsonInputTextarea" rows="5" cols="40"
										placeholder="粘贴由程序生成的模板json字符串"></textarea>
									<br>
									<button type="button" id="jsonInput">导入json</button>
									<p>信息：<span id="jsonInputMessage"></span></p>
								</td>
								<td>
									<p>缓存的json字符串，注意及时<button onclick="save()">缓存</button>。</p>
									<textarea id="saveJsonStringTextarea" rows="5" cols="40"
										style="background-color: aqua;" placeholder="缓存的json字符串，注意及时缓存"></textarea>
									<br>
									<button style="background-color: #ff9742;"
										onclick="$('#areYouSureSpan').show()">清空并重置缓存（危）</button>&nbsp;&nbsp;
									<button onclick="exeCopy()">复制</button>&nbsp;&nbsp;
									<button onclick="load_context_json()"
										style="background-color: yellow;">使用本框内容覆盖缓存</button>
									<span id="areYouSureSpan" style="display: none;">
										<br><span class="wowrnm">Are You Sure? </span>
										<button onclick="window.clear()">Yes</button>
										<button onclick="$('#areYouSureSpan').hide()"><b>&nbsp;No&nbsp;</b></button>
									</span>
									<p>信息:<span id="saveMessageSpan">

										</span></p>
								</td>
							</tr>
						</tbody>
					</table>
				</div>

				<script type="text/javascript">
					$(function() {
						// 初始化的代码
						saveJsonStringTextareaItemString = window.localStorage.getItem("saveJsonStringTextareaItem")
						if (saveJsonStringTextareaItemString != '') {
							try {
								var saveJsonStringTextareaItemObj = JSON.parse(saveJsonStringTextareaItemString);
								document.getElementById("saveMessageSpan").innerHTML = "检测到缓存，已加载";
								load(saveJsonStringTextareaItemObj);
								$("#saveJsonStringTextarea").val(saveJsonStringTextareaItemString)
							} catch (err) {
								document.getElementById("saveMessageSpan").innerHTML = "无缓存或加载缓存失败：" + err.message;
								return;
							}
						}
					})

					// 关于重置模板的代码
					$(function() {
						$("#jsonInput").click(function() {
							try {
								window.jsonInput = JSON.parse($("#jsonInputTextarea").val());
							} catch (err) {
								document.getElementById("jsonInputMessage").innerHTML = err.message;
								return;
							}
							document.getElementById("jsonInputMessage").innerHTML = "JSON length: " + window.jsonInput
								.length + " [OK]";
						})
					})
				</script>
				<br>
				<br>
			</div>
			<style>
				.boxshadow1 {
					box-shadow: inset 0px 15px 15px -15px #000,
						inset 0px -15px 15px -15px #000;
				}
			</style>
			<iframe class="boxshadow1" src="./stream.html" width="80%" height="400px"></iframe>

			<div>
				<div style="text-align: center;">
					<div id="" style="width: 80%; margin: 0 auto;">
						<table id="context_list" class="pure-table" width="100%">
							<thead>
								<tr>
									<th>填写活动信息，共<span id="allItemNum">
											{{json_data.length}}
										</span>项

									</th>

								</tr>
							</thead>
							<tbody style="background-color: white;">
								<tr>
									<td>
										<br>
										文本框背景颜色说明：
										<br>蓝色=内容与模板汉字部分完全一致。
										<br>橙色=可能是忘记填写。
										<br>白色=无上述问题。
									</td>
								</tr>
								<tr v-for="(context, index) in json_data">
									<td>
										<hr />
										<h4>【{{index+1}} of {{json_data.length}}】</h4>
										<h3>{{context.field[0]}}</h3>
										此字段内容将被作用于：
										<span
											v-for="fs_i in context.source.length">&nbsp;<u>{{context.source[fs_i-1]}}-{{context.field[fs_i-1]}}</u></span>
										之中。
										<br>

										<b>
											编写注意:
											<span v-if="context.note[0].length == 0">(无)</span>
											<span v-else>{{context.note[0]}}</span>
										</b>


										<br>
										<textarea onkeyup="checkSelf(this)"
											v-bind:rows="Math.ceil(context.example[0].length*1.2/40) + 6" cols="40"
											v-bind:id="'vueTextareaId_'+index"
											v-bind:placeholder="'编写示例1：\n'+context.example[0].replace(/<br\/>/g, '\n')+'\n（例子共'+context.example[0].length+'字）'"></textarea>
										<br>
										<span
											v-html=" '<button class=\'fillText\' onclick=\'fillInTemplateText('+index+')\'>填入示例文字</button>' "></span>

										<br>
										<span v-bind:title="context.example[0].replace(/<br\/>/g, '\n')">
											word模板中的absolute-id: {{context.absolute_index}}；</span>
									</td>
								</tr>
							</tbody>

						</table>
						<h3>（完！）</h3>
						<div style="text-align: center;">
							<p>(C) 2022 Feng S.X. <br><span
									style="background-color: limegreen;color: #008000;">&nbsp;Vue2&nbsp;</span> inside
							</p>
							<img src="a.png">
						</div>
					</div>
				</div>
			</div>

			<div class="left_center_">
				功能
				<hr>
				<button style="width: 100%;" onclick="fillAll()">1. 覆盖填充示例文字</button><br>
				<hr>
				<button style="width: 100%;" onclick="save()">2. 生成json结果(直接用于生成文件)</button>
				<hr>
				结果<br><span id="funRes">
					-
				</span>
			</div>
			<script type="text/javascript">
				function showMessage(text) {
					var dateString = new Date().toLocaleTimeString();
					var resText = "[" + dateString + "]:" + text;
					$("#saveMessageSpan").text(resText);
					$("#funRes").text(resText);
				}

				var my_vue = new Vue({
					el: "#context_list",
					data: {
						"json_data": window.jsonInput
					}
				});

				function fillInTemplateText(textareaId) {
					textareaId = "#vueTextareaId_" + textareaId;
					console.log(textareaId)
					var textList = $(textareaId).attr('placeholder').replace(/\"/g, '').split('\n').slice(1, -1);
					var text = "";
					for (var i in textList) {
						text += (textList[i] + '\n');
					}
					$(textareaId).val(text);
				}

				function fillAll() {
					var a = $(".fillText");
					for (i in a) {
						a.click();
					}

					showMessage("完成")

					// $("#funRes").text("[" + new Date().toLocaleTimeString() + "]:完成")
					// alert("完成")
				}

				// a = "<button onclick=\'fillInTemplateText(textareaId)\'></button>"
			</script>
			<script type="text/javascript">
				//【在json数据中，index从1开始。在html内的id中，id从0开始。】
				function getTextArea(dataIndexNum) {

					var text = $("#vueTextareaId_" + (dataIndexNum - 1)).val();
					$("#vueTextareaId_" + (dataIndexNum - 1)).keyup();
					text = text.replace(/\n$/, '');
					// 去掉行尾部的换行符
					return text;
				}

				function setTextArea(dataIndexNum, text) {
					$("#vueTextareaId_" + (dataIndexNum - 1)).val(text);
				}

				function save() {
					saveWithOutScroll();
					// $("#saveJsonStringTextarea")[0].scrollIntoView(true);
					//滚动到顶部
					$(window).scrollTop(0);
				}

				$(function() {
					var sint = self.setInterval("saveWithOutScroll()", 30000);
				})

				function saveWithOutScroll() {
					var save_obj = []
					var isOK = "OK";
					for (var i = 1; i <= $("#allItemNum").text(); i++) {
						if (getTextArea(i).length == 0) {
							isOK = "警告：有未完成的内容。请检查是否有文本框为空（以橙黄色表标示出）";
						}
						save_obj.push({
							"dataIndex": i,
							"dataText": getTextArea(i),
							"absolute_index": window.jsonInput[i - 1]["absolute_index"]
						})
					}
					var jsonString = JSON.stringify(save_obj);
					$("#saveJsonStringTextarea").val(jsonString);


					window.localStorage.setItem('saveJsonStringTextareaItem', jsonString);

					showMessage("save:" + isOK);

					// var resText = "["+new Date().toLocaleDateString()+"]:"+isOK;
					// $("#saveMessageSpan").text(resText);
					// $("#funRes").text(resText);

				}

				function load(jsonObj) {
					for (var i = 0; i < jsonObj.length; i++) {
						setTextArea(jsonObj[i]["dataIndex"], jsonObj[i]["dataText"]);
					}
				}

				function exeCopy() {
					var saveJsonStringTextarea = document.getElementById("saveJsonStringTextarea");
					saveJsonStringTextarea.select();
					document.execCommand("copy");

					showMessage("已复制到剪贴板");
					// var resText = "["+new Date().toLocaleDateString()+"]:";
					// $("#saveMessageSpan").text(resText);
					// $("#funRes").text(resText);
				}

				function clear() {
					window.localStorage.setItem('saveJsonStringTextareaItem', '');
					showMessage("清除缓存成功，刷新界面彻底清除界面缓存。");
				}

				// 只提取汉字
				function getChineseOnly(strValue) { // eslint-disable-line
					if (strValue !== null && strValue !== '') {
						const reg = /[\u4e00-\u9fa5]/g;
						return strValue.match(reg).join('');
					}
					return '';
				}

				function checkSelf(obj) {
					//获取placeholder内容 
					var textPlaceholder = getChineseOnly(obj.getAttribute("placeholder")).replace('编写示例', '').replace('共字', '')
						.replace('例子', '')

					var textValue = getChineseOnly(obj.value)


					console.log(textPlaceholder);
					console.log(textValue)
					if (textPlaceholder == textValue) {
						obj.setAttribute("style", "background-color: #00aaff;")
					} else if (textValue == '') {
						obj.setAttribute("style", "background-color: orange;")
					} else {
						obj.setAttribute("style", "background-color: #FFFFFF;")
					}
					// console.log(obj);
				}


				function load_context_json() {
					try {
						var jsonString = $("#saveJsonStringTextarea").val();
						var save_json_obj = JSON.parse(jsonString);

						if (confirm("你确定要加载此缓存？这将导致当前页面内的内容被覆盖！\n**注意：此操作不可撤销！**")) {
							window.localStorage.setItem('saveJsonStringTextareaItem', jsonString)
							location.reload();
						}


					} catch (err) {
						errorString = err.message;
						showMessage(errorString);
						console.log(errorString)
						return;
					}
				}
			</script>



			<!-- <script>
	        //点击导入按钮,使files触发点击事件,然后完成读取文件的操作
	        $("#fileImport").click(function() {
	            $("#files").click();
	        })
	
	        function fileImport() {
	            //获取读取我文件的File对象
	            var selectedFile = document.getElementById('files').files[0];
	            var name = selectedFile.name; //读取选中文件的文件名
	            var size = selectedFile.size; //读取选中文件的大小
	            console.log("文件名:" + name + "大小:" + size);
	            var reader = new FileReader(); //这是核心,读取操作就是由它完成.
	            reader.readAsText(selectedFile); //读取文件的内容,也可以读取文件的URL
	            reader.onload = function() {
	                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
	                // console.log(this.result);
					for line in this.result.split('ENDLINE\n'){
						
					}
	            }
	        }
	
	    </script> -->



	</body>
</html>
